<template>
	<view>
		<!-- 下载更新的时候使用 -->
		<view class="mast" v-if="showDownloadMask">
			<progress class="downloadProgress" :show-info="true" :percent="hasDownload"></progress>
		</view>

		<view class="topNav">
			<view :class="{active:pageType==0}" @tap="pageType=0">正在热映</view>
			<view :class="{active:pageType==1}" @tap="pageType=1">即将上映</view>
		</view>
		<view class="topNav-bottom">
			<view class="topNav-bottom-bar" :class="{active:pageType==1}"></view>
		</view>
		<!--下面的slide 热映与即将上映 -->
		<view class="swiperView">
			<swiper class="swiperMovie" @change="swiperChange" :current="pageType">
				<swiper-item style="overflow: auto;">
					<hot></hot>
				</swiper-item>
				<swiper-item style="overflow: auto;">
					<comming v-if="showComing"></comming>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import hot from "./hot.vue";
	import comming from "./comming.vue";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				pageType: 0,
				showComing: false
			};
		},
		computed: {
			...mapState(["cityName", "showDownloadMask", "hasDownload"])
		},
		onLoad(options) {},
		methods: {
			swiperChange(event) {
				if (event.detail.current == 1 && this.showComing == false) {
					this.showComing = true;
				}
				this.pageType = event.detail.current;
			}
		},
		components: {
			hot,
			comming
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flexbox($dir:row) {
		display: flex;
		flex-direction: $dir;
		width: 100%;
		@content;
	}

	$primaryColor:#e54847;

	.topNav {
		@include flexbox()>view {
			height: 90upx;
			font-size: 32upx;

			@include flexbox() {
				width: 50%;
				justify-content: center;
				align-items: center;
			}

			&.active {
				color: $primaryColor;
			}
		}
	}

	.topNav-bottom {
		background-color: lightgray;

		.topNav-bottom-bar {
			width: 50%;
			height: 3upx;
			background-color: $primaryColor;
			transition: all 0.2s linear;

			&.active {
				transform: translateX(100%);

			}
		}

	}

	.swiperView {
		position: fixed;
		top: 93upx;
		width: 100%;
		bottom: 0px;
		left: 0px;

		>swiper {
			width: 100%;
			height: 100%;
		}
	}
</style>

<style scoped lang="scss">
	.mast {
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		left: 0px;
		top: 0px;
		background-color: white;
		z-index: 99;

		.downloadProgress {
			width: 100%;
		}
	}
</style>
